<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约车位页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/element/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/js/element/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: whitesmoke;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding-top: 0px;
            padding-bottom: 0px;
            overflow: hidden;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        /**/
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-red {
            background: red;
        }

        .bg-green {
            background: green;
        }

        .bg-yellow {
            background: coral;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            height: 150px;
            border-radius: 4px;
            min-height: 36px;
        }

        .grid-content2 {
            height: 50px;
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body style="margin: 0">
<div id="app">
    <el-container>
        <el-header style="padding-left: 0;padding-right: 0">
            <!--导航栏-->
            <el-menu :default-active="'1'"
                     class="el-menu-demo"
                     mode="horizontal"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1" onclick="javascript:location.href='index.html'">首页</el-menu-item>
                <el-menu-item index="2" onclick="javascript:location.href='myreserve.html'">我的预约</el-menu-item>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">访问官网</a></el-menu-item>
            </el-menu>
        </el-header>

        <el-container>
            <el-aside width="15%"></el-aside>
            <el-main>
                <el-alert :title="selectMsg" type="info" show-icon></el-alert>
                <el-divider></el-divider>
                <!--栅格-->
                <!--表格行数由parkingSpaceList长度决定，当length能被8整除则行数为length/8，否则为length/8 注意v-for遍历数字从1开-->
                <el-row :gutter="20"
                        v-for="i in parkingSpaceList.length % 8 == 0? parkingSpaceList.length/8+1 : parkingSpaceList.length/8+2">
                    <el-col v-for="(item, index) in parkingSpaceList.slice(8*(i-1), 8*(i-1) + 8)" :span="3">
                        <!--一行显示8个单元格-->
                        <div class="grid-content"
                             :class="item.locked? 'bg-red':item.id == selectId ? 'bg-yellow' : 'bg-green'"
                             v-on:click="selectSpace(item.id)">
                            编号：<strong>{{item.id}}</strong><br/>
                            <strong>{{statusType[item.status]}}</strong>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3" :offset="15">
                        <div class="grid-content2 bg-green">空闲({{free}}个)</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content2 bg-red">占用({{total-free}}个)</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content2 bg-yellow">选中({{selectId == null ? 0:1}}个)</div>
                    </el-col>
                </el-row>


                <el-divider></el-divider>
                <el-button type="" v-on:click="reserve(null)">随机预约车位</el-button>
                <el-button type="primary" v-on:click="reserve(selectId)">预约选定车位</el-button>
                <el-button type="info" onclick="javascript:location.href='path.html'">停车引导页面<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
                <el-divider></el-divider>

            </el-main>
            <el-aside width="15%"></el-aside>
        </el-container>

        <el-footer>© 2020 中国地质大学（武汉） .Powered by CUG. | 服务器状态 | Donate</el-footer>
    </el-container>
</div>
<script>
    axios.defaults.withCredentials = true// 允许携带cookie信息
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    var app = new Vue({
        el: '#app',
        data: {
            statusType: ['空闲', '占用', '被预定', '管理员锁定'],
            parkingSpaceList: [],
            //预约用
            selectId: null,//选择的车位
            total: 16,
            free: 16,
            selectMsg: "请选择预约车位，如果您不想手动选择，可以直接点击“随机预约车位”。",
        },
        methods: {
            selectSpace: function (id) {
                if (this.parkingSpaceList[id - 1].locked) {
                    this.showMessage('warning', '该车位已被占用，不能选择！');
                    return;
                } else if (this.parkingSpaceList[id - 1].status == 2) {
                    this.showMessage('warning', '该车位已被预约，不能选择！');
                    return;
                }
                if (id == this.selectId) {
                    this.selectId = null;//取消
                    this.selectMsg = "请选择预约车位，如果您不想手动选择，可以直接点击“随机预约车位”。";
                } else {
                    this.selectId = id;
                    this.selectMsg = "您已选择预约" + id + "号车位，请点击“预约选定车位”。";
                }
            },
            showMessage: function (type, message) {
                this.$message({
                    message: message,
                    type: type
                });
            },

            findAll: function () {
                var that = this;
                axios.get("/park").then(
                    function (response) {
                        that.parkingSpaceList = response.data;
                        that.updateCount();
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            },
            updateCount: function () {
                this.total = this.parkingSpaceList.length;
                this.free = 0;
                for (var i = 0; i < this.parkingSpaceList.length; i++) {
                    var parkingSpace = this.parkingSpaceList[i];
                    if (!parkingSpace.locked) {
                        this.free++;
                    }
                }
            },

            reserve: function (id) {//预定
                var that = this;
                axios({
                    method: "post",
                    url: "/park/reserve",
                    params: {
                        id: id//this.id == "" ? null : this.id,
                    }
                }).then(
                    function (response) {
                        if (response.data.flag) {
                            var parkingSpace = response.data.res;
                            that.parkingSpaceList.splice(parkingSpace.id - 1, 1, parkingSpace);
                            that.showMessage('success', response.data.msg);
                        } else {
                            that.showMessage('warning', response.data.msg);
                        }
                    }, function (err) {
                        console.log(err);
                    }
                );
            },
        }
    });
    window.onload = function () {
        app.findAll();
    };
</script>
</body>
</html>